<template>
	<view class="details_container">
		<div class="card">
			<div class="left">
				<span>姓名：{{userInfo.name}}</span>
				<span>性别：{{userInfo.gender == "1"?"男":"女"}}</span>
				<span>年龄：{{userInfo.age}}</span>
			</div>
			<div class="right">
				<up-qrcode :size="110" :val="JSON.stringify(qrcodeInfo)"></up-qrcode>
			</div>
		</div>
		<!-- 预约信息 -->
		<div class="reservatio_card">
			<p class="title">服务信息</p>
			<div class="list">
				<up-cell-group :customStyle="{'fontSize': '32px'}">
					<up-cell title="预约医生" :value="doctorInfo.name"></up-cell>
					<up-cell title="预约社区" :value="communityInfo.communityName"></up-cell>
					<up-cell title="服务时间" :label="reservationInfo.appointmentTime == 'afternoon'?'下午':'上午'"
						:value="DateConversion(reservationInfo.appointmentDate) "></up-cell>
					<up-cell title="服务状态" :value="isJudgeStatus(reservationInfo.status)"></up-cell>

				</up-cell-group>
			</div>
		</div>
		
		
		<!-- 医嘱 -->
		<div v-if="isDrugs" class="reservatio_card">
			<p class="title">就诊信息</p>
			<up-cell title="症状" :value="diagnosisInfo.symptom"></up-cell>
			<up-cell title="症状描述" :value="diagnosisInfo.description"></up-cell>
			<p class="title" style="margin-top: 20rpx;">医嘱/用药事项</p>
			<div class="text">
				&nbsp;&nbsp;&nbsp;&nbsp;
				{{diagnosisInfo.suggestion}}
			</div>
		</div>
		
		
		<!-- 可能会有药品信息 -->
		<div v-if="isDrugs" class="reservatio_card">
			<p class="title">药品信息</p>
			<up-cell-group :customStyle="{'fontSize': '32px'}">
				<up-cell v-for="(item,index) in drugsInfo" :key="index" :title="item.drugs.drugsName"
					:value="item.prescribe.drugNumber" :label="item.drugs.price"></up-cell>
			</up-cell-group>
			<!-- 总价 -->
			<div class="total_price">
				<p>总价:{{diagnosisInfo?.totalPrice}}元</p>
			</div>
		</div>


		<!-- 如果是待支付则出现确认支付按钮 -->
		<div v-if="isPayment" class="payment" @click="confirmPayment">
			<span>确认支付</span>
		</div>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		apiQueryUser,
		apiGetDetails
	} from "@/api/user.js"
	import {
		apiGetInfo,
		apiGetDiagnosis,
		apiPayment
	} from "@/api/reservation.js"

	const qrcodeInfo = ref({
		reservationId: null
	})
	const diagnosisInfo = ref({
		totalPrice: null
	})
	// 医生信息
	const doctorInfo = ref({})
	//预约信息
	const reservationInfo = ref({
		appointmentDate: ""
	})
	//用户信息
	const userInfo = ref({})
	//社区信息
	const communityInfo = ref({})

	//确认支付按钮显示
	const isPayment = ref(false)
	// 药品信息展示
	const isDrugs = ref(false)
	// 药品信息
	const drugsInfo = ref({})

	//确认支付
	const confirmPayment = async () => {
		try {
			await apiPayment(reservationInfo.value.reservationId)
			uni.showToast({
				title: '支付成功',
				icon: "success",
				duration: 1000
			});
			// 返回列表
		
		} catch (error) {
			uni.showToast({
				title: '支付失败',
				icon: "error",
				duration: 2000
			});
	
		}
		setTimeout(()=>{
			uni.navigateBack()
		},1000)
	}


	//预约时间转换
	const DateConversion = (date) => {
		return date.split('T')[0]
	}


	// 判断当前滑块所在页面是什么
	const isJudgeStatus = (status) => {
		switch (status) {
			case "1":
				return '已预约';
			case "3":
				return '已过期';
			case "4":
				return "待支付";
			case '5':
				return "支付失败";
			case '6':
				return "就诊完成";
		}
	}


	//页面加载
	onLoad(async (option) => {
		//获取用户信息
		let userResult = await uni.getStorage({
			key: "empleyeeInfo"
		})
		userInfo.value = userResult.data

		// 获取社区信息
		let cRes = await apiGetDetails(userInfo.value.communityId);
		communityInfo.value = cRes.data


		//获取医生信息
		let userRes = await apiQueryUser(option.empId)
		doctorInfo.value = userRes.data

		// 获取预约信息
		let rRes = await apiGetInfo(option.rId)
		reservationInfo.value = rRes.data
		qrcodeInfo.value.reservationId = reservationInfo.value.reservationId

		//根据预约信息的状态去获取就诊信息
		let status = Number(reservationInfo.value.status)
		if (status >= 4) {
			isDrugs.value = true
			let diagnosis = await apiGetDiagnosis(reservationInfo.value.reservationId)
			diagnosisInfo.value = diagnosis.data.diagnosis
			drugsInfo.value = diagnosis.data.drugs
			console.log(diagnosisInfo.value);
		}
		if(status == 4){
			isPayment.value = true
		}
	})
</script>

<style scoped lang="scss">
	.details_container {
		width: 100vw;
		// height: 100%;
		height: 100vh;
		overflow-y: scroll;
		padding: 20rpx 20rpx 100rpx 20rpx;
		box-sizing: border-box;
		background-color: #eee;


		.payment {
			width: 100%;
			border-radius: 20rpx;
			margin-top: 40rpx;
			height: 80rpx;
			background: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			color: #fff;
			background-color: #F5B017;
		}


		.card {
			width: 100%;
			height: 240rpx;
			background-color: #fff;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;

			.left {
				display: flex;
				flex-direction: column;

				label {
					margin: 10rpx 0;
				}
			}
		}

		.drugs_card {
			// height: 1000rpx !important;
		}

		.reservatio_card {

			.text {
				word-wrap: break-word;
				margin-top: 20rpx;
				line-height:50rpx;
			}

			width: 100%;
			// height: 500rpx;
			margin: 40rpx auto 0 auto;
			background-color: #fff;
			box-sizing: border-box;
			padding: 20rpx;
			border-radius: 20rpx;

			.total_price {
				width: 100%;
				font-size: 32rpx;
				display: flex;
				justify-content: flex-end;
				margin-top: 20rpx;
				// height: 100rpx;
			}

			.title {
				font-size: 42rpx;
			}

			.list {
				margin-top: 30rpx;


			}
		}
	}
</style>
